<template>
  <view class="tips-card">
    <view class="t-title">{{info?.title}}</view>
    <view class="t-text" v-if="info?.title">其他亲家无法联系您</view>
    <view class="t-btn" :class="btype == 'index' ? '' : 'my-btn'" @click="toUrl(info.url)" v-if="info.btnText"><custom-btn>{{info.btnText}}</custom-btn></view>
  </view>
</template>

<script setup>
import { getItem } from "@/utils/storage";
const props = defineProps({
  btype: {
    type: String,
    default: "",
  },
});

const info = computed(() => {
  const { appLogin, phone } = getItem("user_info") || {};

  let btnText = "立即登记";
  if (props.btype == "index") {
    btnText = "验证手机号完成登记";
  }
  if (!appLogin) {
    return {
      title: "您还未完善孩子资料",
      btnText: "立即完善",
      url: "/subPages/register/index",
    };
  }
  if (!phone) {
    return {
      title: "您还未登记联系方式",
      btnText,
      url: "/subPages/register/contact",
    };
  }
  return {};
});

const toUrl = (url) => {
  uni.navigateTo({ url });
};
</script>

<style lang=scss scoped>
.tips-card {
  height: 480rpx;
  background: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: $uni-title-color;
  @include borderBox;
  padding: 80rpx;
  margin: 20rpx;
  .t-title {
    font-size: 52rpx;
    font-weight: bold;
  }
  .t-text {
    padding: 20rpx 0 60rpx;
    color: $uni-text-color-grey;
  }

  .t-btn {
    width: 660rpx;
    height: 120rpx;
    line-height: 120rpx;
    background: linear-gradient(
      180deg,
      rgba(255, 92, 85, 0.9) 0%,
      #ff5c55 100%
    );
    border-radius: 120rpx;
    color: #fff;
    font-size: 40rpx;
  }

  .my-btn {
    width: 480rpx;
    background: linear-gradient(
      180deg,
      rgba(241, 55, 64, 0.9) 0%,
      #f13740 100%
    );
  }
}
</style>